import React from "react";
import { Row, Col } from "antd";
import "../../css/home.scss";
import { Avatar, Image, Calendar } from "antd";
import * as echarts from "echarts";
import { connect } from "react-redux";
import { UserOutlined, ChromeOutlined, EyeOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import request from '../../utils/request'

function Home(props) {
   const [usertotal, setusertotal] = useState();
   const [communitytotal, setcommunitytotal] = useState();
  useEffect(() => {
    let myChart = echarts.init(document.getElementById("echar"));
    myChart.setOption({
      title: {
        text: "最近一周社团情况",
      },
      xAxis: {
        name: "星期",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        name: "会员人数",
      },
      series: [
        {
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25],
        },
        {
          type: "bar",
          data: [26, 24, 18, 22, 23, 20, 27],
        },
      ],
    });
        request.get("/users").then(({ data: { data } }) => {
          setusertotal(data.total);
        });
        request.get("/org").then(({ data: { data } }) => {
          setcommunitytotal(data.total);
        });
  }, []);

  return (
    <>
      <Row style={{ justifyContent: "space-between" }}>
        <Col span={8}>
          <div className="userinfo">
            <div className="info">
              <Avatar
                size={100}
                src={
                  <Image
                    src="https://lin-xin.gitee.io/example/work/static/img/img.146655c9.jpg"
                    style={{ width: 100 }}
                  />
                }
              />
              <span style={{ marginLeft: 50, fontSize: 30, color: "#000" }}>
                {props.username}
              </span>
            </div>
            <p></p>
            <Row style={{ marginBottom: 5 }}>
              <Col span={12}>上次登录时间：</Col>
              <Col span={12}>2021-11-24</Col>
            </Row>
            <Row>
              <Col span={12}>上次登录地点：</Col>
              <Col span={12}>广州</Col>
            </Row>
          </div>
          <div className="calendar">
            <div className="site-calendar-demo-card">
              <Calendar fullscreen={false} />
            </div>
          </div>
        </Col>
        <Col span={15}>
          <div>
            <Row
              className="num_info"
              style={{ justifyContent: "space-between" }}
            >
              <Col span={7}>
                <p style={{ backgroundColor: "#2d8cf0" }}>
                  <EyeOutlined />
                </p>
                <div>
                  <span style={{ color: "#2d8cf0", fontSize: "30px" }}>99</span>
                  <span>用户访问量</span>
                </div>
              </Col>
              <Col span={7}>
                <p style={{ backgroundColor: "#64d572" }}>
                  <UserOutlined />
                </p>
                <div>
                  <span style={{ color: "#64d572", fontSize: "30px" }}>
                    {usertotal}
                  </span>
                  <span>会员总数</span>
                </div>
              </Col>
              <Col span={7}>
                <p style={{ backgroundColor: "#f25e43" }}>
                  <ChromeOutlined />
                </p>
                <div>
                  <span style={{ color: "#f25e43", fontSize: "30px" }}>
                    {communitytotal}
                  </span>
                  <span>社团总数</span>
                </div>
              </Col>
            </Row>
          </div>
          <div id="echar" style={{ width: 600, height: 400 }}></div>
        </Col>
      </Row>
    </>
  );
}
Home = connect(
  (state) => {
    return {
      username: state.userinfo.userinfo.username,
    };
  },
  () => {
    return {};
  }
)(Home);
export default Home;
